<template>
  <div class="app-container thesis-home">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">论文首页（吴静怡）</h1>
      <p class="page-subtitle">毕业论文管理系统 - 个人展示页面</p>
    </div>

    <!-- 个人信息板块 -->
    <el-card class="info-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="card-title">
          <i class="el-icon-user-solid"></i>
          个人信息
        </span>
      </div>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="8" :md="6">
          <div class="avatar-section">
            <el-avatar :size="120" :src="userInfo.avatar" class="user-avatar">
              {{ userInfo.name ? userInfo.name.charAt(0) : '吴' }}
            </el-avatar>
            <div class="avatar-info">
              <h3>{{ userInfo.name }}</h3>
              <p class="user-title">{{ userInfo.title }}</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="16" :md="18">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <label>学号：</label>
                <span>{{ userInfo.studentId }}</span>
              </div>
              <div class="info-item">
                <label>专业：</label>
                <span>{{ userInfo.major }}</span>
              </div>
              <div class="info-item">
                <label>学院：</label>
                <span>{{ userInfo.college }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <label>联系电话：</label>
                <span>{{ userInfo.phone }}</span>
              </div>
              <div class="info-item">
                <label>邮箱：</label>
                <span>{{ userInfo.email }}</span>
              </div>
              <div class="info-item">
                <label>指导老师：</label>
                <span>{{ userInfo.advisor }}</span>
              </div>
            </el-col>
          </el-row>
          <div class="introduction">
            <h4>个人简介</h4>
            <p>{{ userInfo.introduction }}</p>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 毕业论文基本信息展示区 -->
    <el-card class="thesis-basic-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="card-title">
          <i class="el-icon-document"></i>
          毕业论文基本信息
        </span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="thesis-info-item">
            <label>论文题目：</label>
            <span class="thesis-title">{{ thesisInfo.title }}</span>
          </div>
          <div class="thesis-info-item">
            <label>研究方向：</label>
            <span>{{ thesisInfo.researchField }}</span>
          </div>
          <div class="thesis-info-item">
            <label>论文类型：</label>
            <span>{{ thesisInfo.type }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="thesis-info-item">
            <label>开题时间：</label>
            <span>{{ thesisInfo.startDate }}</span>
          </div>
          <div class="thesis-info-item">
            <label>预计完成时间：</label>
            <span>{{ thesisInfo.expectedDate }}</span>
          </div>
          <div class="thesis-info-item">
            <label>当前进度：</label>
            <el-progress :percentage="thesisInfo.progress" :color="customColors"></el-progress>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="thesis-info-item">
            <label>论文状态：</label>
            <el-tag :type="thesisInfo.status === '进行中' ? 'success' : thesisInfo.status === '已完成' ? 'primary' : 'warning'">
              {{ thesisInfo.status }}
            </el-tag>
          </div>
          <div class="thesis-info-item">
            <label>关键词：</label>
            <div class="keywords">
              <el-tag v-for="(keyword, index) in thesisInfo.keywords" :key="index" size="small">
                {{ keyword }}
              </el-tag>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="abstract-section">
        <h4>论文摘要</h4>
        <p>{{ thesisInfo.abstract }}</p>
      </div>
    </el-card>

    <!-- 论文成果详细介绍模块 -->
    <el-card class="achievement-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="card-title">
          <i class="el-icon-trophy"></i>
          论文成果介绍
        </span>
      </div>
      <el-tabs v-model="activeAchievementTab" type="card">
        <el-tab-pane label="研究成果" name="research">
          <div class="achievement-content">
            <h4>主要研究成果</h4>
            <ul class="achievement-list">
              <li v-for="(item, index) in achievements.research" :key="index">
                <i class="el-icon-check"></i>
                {{ item }}
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="创新点" name="innovation">
          <div class="achievement-content">
            <h4>论文创新点</h4>
            <ul class="achievement-list">
              <li v-for="(item, index) in achievements.innovation" :key="index">
                <i class="el-icon-star-on"></i>
                {{ item }}
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="应用价值" name="application">
          <div class="achievement-content">
            <h4>实际应用价值</h4>
            <ul class="achievement-list">
              <li v-for="(item, index) in achievements.application" :key="index">
                <i class="el-icon-coin"></i>
                {{ item }}
              </li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs>
      
      <div class="statistics-section">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-number">{{ statistics.paperCount }}</div>
              <div class="stat-label">发表论文</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-number">{{ statistics.patentCount }}</div>
              <div class="stat-label">申请专利</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-number">{{ statistics.awardCount }}</div>
              <div class="stat-label">获得奖项</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-number">{{ statistics.citationCount }}</div>
              <div class="stat-label">论文引用</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 快速导航 -->
    <el-card class="quick-nav-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="card-title">
          <i class="el-icon-connection"></i>
          快速导航
        </span>
      </div>
      <el-row :gutter="20">
        <el-col :xs="12" :sm="6" :md="3" v-for="(nav, index) in quickNavs" :key="index">
          <div class="nav-item" @click="handleNavClick(nav.path)">
            <div class="nav-icon">
              <i :class="nav.icon"></i>
            </div>
            <div class="nav-label">{{ nav.label }}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "ThesisHome",
  data() {
    return {
      // 当前激活的成果标签页
      activeAchievementTab: 'research',
      
      // 自定义进度条颜色
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ],
      
      // 用户信息
      userInfo: {
        name: '吴静怡',
        studentId: '042020220010',
        major: '数据科学与大数据技术',
        college: '工程技术学院',
        phone: '18650202661',
        email: '2223993025@qq.com',
        advisor: '张展老师',
        title: '本科生',
        avatar: '',
        introduction: '热爱计算机科学，专注于人工智能和机器学习领域的研究。在校期间积极参与科研项目，具备扎实的专业基础和较强的实践能力。'
      },
      
      // 论文信息
      thesisInfo: {
        title: '基于深度学习的图像识别技术在医疗诊断中的应用研究',
        researchField: '人工智能与医疗健康',
        type: '学术论文',
        startDate: '2024-09-01',
        expectedDate: '2025-06-30',
        progress: 75,
        status: '进行中',
        keywords: ['深度学习', '图像识别', '医疗诊断', '人工智能'],
        abstract: '本研究探讨了深度学习技术在医疗图像识别领域的应用，通过构建卷积神经网络模型，实现了对医学影像的高精度识别和分类。研究结果表明，该技术能够有效辅助医生进行疾病诊断，提高诊断准确率和效率。'
      },
      
      // 成果信息
      achievements: {
        research: [
          '提出了一种基于注意力机制的医学图像识别模型',
          '在公开数据集上达到了95%以上的识别准确率',
          '开发了原型系统并进行了实际测试验证',
          '完成了相关算法的优化和性能调优'
        ],
        innovation: [
          '创新性地将注意力机制应用于医学图像识别',
          '提出了多尺度特征融合的网络结构',
          '设计了针对医疗数据的特殊预处理方法',
          '实现了模型的可解释性分析功能'
        ],
        application: [
          '可用于医院影像科的辅助诊断系统',
          '支持多种常见疾病的早期筛查',
          '降低医生工作强度，提高诊断效率',
          '为远程医疗提供技术支持'
        ]
      },
      
      // 统计数据
      statistics: {
        paperCount: 3,
        patentCount: 2,
        awardCount: 5,
        citationCount: 28
      },
      
      // 快速导航
      quickNavs: [
        { label: '学生信息', icon: 'el-icon-user', path: '/student' },
        { label: '论文管理', icon: 'el-icon-document', path: '/thesis' },
        { label: '成果展示', icon: 'el-icon-trophy', path: '/achievement' },
        { label: '文档下载', icon: 'el-icon-download', path: '/download' },
        { label: '进度跟踪', icon: 'el-icon-data-line', path: '/progress' },
        { label: '系统设置', icon: 'el-icon-setting', path: '/system' },
        { label: '帮助中心', icon: 'el-icon-question', path: '/help' },
        { label: '联系我们', icon: 'el-icon-phone', path: '/contact' }
      ]
    }
  },
  
  methods: {
    // 处理导航点击
    handleNavClick(path) {
      if (path) {
        this.$router.push(path)
      }
    }
  }
}
</script>

<style scoped>
.thesis-home {
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
}

.page-title {
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
}

.info-card, .thesis-basic-card, .achievement-card, .quick-nav-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #303133;
}

.card-title i {
  margin-right: 8px;
  color: #409EFF;
}

.avatar-section {
  text-align: center;
  padding: 20px 0;
}

.user-avatar {
  margin-bottom: 15px;
  border: 3px solid #409EFF;
}

.avatar-info h3 {
  margin: 10px 0 5px 0;
  font-size: 1.4rem;
  color: #303133;
}

.user-title {
  color: #909399;
  font-size: 0.9rem;
}

.info-item {
  margin-bottom: 15px;
  padding: 8px 0;
}

.info-item label {
  font-weight: 600;
  color: #606266;
  margin-right: 8px;
}

.info-item span {
  color: #303133;
}

.introduction {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #409EFF;
}

.introduction h4 {
  margin-bottom: 10px;
  color: #409EFF;
}

.thesis-info-item {
  margin-bottom: 20px;
}

.thesis-info-item label {
  font-weight: 600;
  color: #606266;
  display: block;
  margin-bottom: 5px;
}

.thesis-title {
  font-size: 1.1rem;
  color: #303133;
  font-weight: 500;
}

.keywords {
  margin-top: 5px;
}

.keywords .el-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

.abstract-section {
  margin-top: 25px;
  padding: 20px;
  background: #f0f9ff;
  border-radius: 6px;
  border: 1px solid #e1f5fe;
}

.abstract-section h4 {
  color: #1890ff;
  margin-bottom: 10px;
}

.achievement-content {
  padding: 20px;
}

.achievement-content h4 {
  color: #409EFF;
  margin-bottom: 15px;
  border-bottom: 2px solid #e6f7ff;
  padding-bottom: 8px;
}

.achievement-list {
  list-style: none;
  padding: 0;
}

.achievement-list li {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
}

.achievement-list li:last-child {
  border-bottom: none;
}

.achievement-list i {
  color: #67C23A;
  margin-right: 10px;
  font-size: 1.1rem;
}

.statistics-section {
  margin-top: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 8px;
  color: white;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.quick-nav-card {
  margin-top: 30px;
}

.nav-item {
  text-align: center;
  padding: 20px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 6px;
}

.nav-item:hover {
  background: #f5f7fa;
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.nav-icon {
  font-size: 2rem;
  color: #409EFF;
  margin-bottom: 10px;
}

.nav-label {
  font-size: 0.9rem;
  color: #606266;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .info-item {
    margin-bottom: 10px;
  }
  
  .nav-item {
    padding: 15px 5px;
  }
  
  .nav-icon {
    font-size: 1.5rem;
  }
}
</style>